<div class="warp">
    <div class="table">
        <!-- 头部Table -->
        <nz-table #nestedTable style="border-collapse:collapse;border-radius:4px 4px 0px 0px;" [nzData]="selectData"
            class="designTable" [nzShowPagination]='false' [nzScroll]="{x:'2540px',y:'750px'}">
            <thead class="tableHeard" style="text-align: center !important;color: #ffffff;height: 50px;">
                <tr style="text-align: center !important;">
                    <th nzWidth="50px"></th>
                    <th nzWidth="50px"></th>
                    <th nzWidth="50px"></th>
                    <th nzWidth="50px" nzShowExpand></th>
                    <th nzWidth="250px">工聯單號</th>
                    <th nzWidth="130px">
                        <ng-container>
                            <button nzTrigger="click" nz-button nz-dropdown [nzDropdownMenu]="menu4" class="state">工單狀態
                                <i nz-icon nzType="down"></i>
                            </button>
                            <nz-dropdown-menu #menu4="nzDropdownMenu">
                                <ul nz-menu class="dropdownMenu" *ngFor="let item of checkBoxStatus">
                                    <li nz-menu-item style="color:#ffffff;" class="Li">
                                        <input class="doing" type="checkbox" (click)="doingForm(item)"
                                            [(ngModel)]="item.checked" /> {{item.title}}
                                    </li>
                                </ul>
                            </nz-dropdown-menu>
                        </ng-container>
                    </th>
                    <!-- 机种 -->
                    <th nzWidth="200px">機種</th>
                    <!-- 治具名称 -->
                    <th nzWidth="230px">治具名稱</th>
                    <th nzWidth="230px">19碼</th>
                    <th nzWidth="150px">數量</th>
                    <th nzWidth="150px">工單時間</th>
                    <th nzWidth="200px">總檢備註</th>
                    <th nzWidth="200px">退單備註</th>
                    <!-- 填單人姓名 -->
                    <th nzWidth="150px">填單人姓名</th>
                    <!-- 申請部門負責人 -->
                    <th nzWidth="150px">申請部門負責人</th>
                    <!-- 送貨區域 -->
                    <th nzWidth="150px">送貨區域</th>
                    <th nzWidth="150px">治具交期</th>

                </tr>
            </thead>
            <!-- 工联单Table -->
            <tbody class="tablecontent">
                <ng-container *ngFor="let item of selectData let key = index">
                    <tr id="first" style="text-align: center !important;">
                        <td style="padding-left: 4px;text-align: left"><a *ngIf="item.songjian_time == ''"
                                class="new"></a></td>
                        <td><a class="attich" (click)="downLoad(item)"></a></td>
                        <td><a class="del" (click)="showModal(item)" [hidden]="item.status !== 0"></a></td>
                        <td nzShowExpand [(nzExpand)]="item.expand" style="color: rgba(48,73,77,1);text-align: center;"
                            (nzExpandChange)="collapse(item,key)"></td>
                        <!--工聯單號  -->
                        <td title="{{item.union_order}}">
                            <span
                                style="text-align: left; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;width: 240px;">
                                {{item.union_order}}
                            </span>
                        </td>
                        <!-- 工單狀態 -->
                        <td>{{item.status === 0 ? '進行中' : (item.status === 1 ? '已完成' : '已取消')}}</td>
                        <!-- 机种 -->
                        <td style=" text-align: center;">{{item.machine_type}}</td>
                        <!-- 治具名称 -->
                        <td style="text-align: left;" title="{{item.name}}">
                            <span
                                style="text-align: left; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;width: 220px;">
                                {{item.name}}
                            </span>
                        </td>
                        <!-- 19码悬浮框 -->
                        <td class="fontColor" *ngIf="item.code19.split(',')[1]"
                            style="text-align: left;text-indent: 10px;"
                            title={{item.code19.split(splitJudge)[0]}}~{{item.code19.split(splitJudge)[1]}}>
                            <a class="add19code" *ngIf=" !item.code19 || item.code19 === ',' || item.code19 === ''"></a>
                            {{item.code19.split(",")[0]}}
                        </td>
                        <td class="fontColor" *ngIf="!item.code19.split(',')[1]"
                            style="text-align: left;text-indent: 10px;">
                            <a class="add19code" *ngIf=" !item.code19 || item.code19 === ',' || item.code19 === ''"></a>
                            {{item.code19.split(",")[0]}}
                        </td>
                        <!--數量 -->
                        <td>{{item.quatity}}</td>

                        <!--設計期限  -->
                        <td>{{item.total_time =='' || 0 ? '' : item.total_time +'小時'}}</td>
                        <!--設計備註  -->
                        <td title="{{item.zongjian_beizhu}}">
                            <span
                                style="text-align: left; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;width: 190px;">
                                {{item.zongjian_beizhu}}
                            </span>
                        </td>
                        <!-- 退單備注 -->
                        <td>
                            <span
                                style="text-align: left; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;width: 190px;">
                                {{item.other_remark}}
                            </span>
                        </td>
                        <!-- 填單人姓名 -->
                        <td>{{item.apply_person}}</td>
                        <!-- 申請部門負責人 -->
                        <td>{{item.applyDeptPIC}}</td>
                        <!-- 送貨區域 -->
                        <td>{{item.delivery_addr}}</td>
                        <!-- 開始時間 -->
                        <!--治具交期  -->
                        <td>{{item.delivery_date}}</td>
                    </tr>
                    <tr [(nzExpand)]="item.expand">
                        <td colspan="18" style="padding-left:6px !important;">
                            <!-- 展开治具Table -->
                            <nz-table #innerTable [nzData]="workData[key]" nzSize="middle" [nzShowPagination]="false">
            <tbody class="downData">
                <ng-container *ngFor="let item2 of workData[key] let key2 =index">
                    <tr id="second" style="text-align: center !important;">
                        <td style="width:50px;"></td>
                        <td style="width:50px;"></td>
                        <td style="width:50px;"></td>
                        <td *ngIf="item2.chaidan == 1 " nzShowExpand [(nzExpand)]="item2.expand"
                            style="color: rgba(48,73,77,1);width: 50px;"
                            (nzExpandChange)="QueryWorkOrder2(item2,key,key2)"></td>
                        <td *ngIf="item2.chaidan != 1 " style="color: rgba(48,73,77,1);width: 50px;"></td>
                        <td style="width:250px;" title="{{item2.sheet_order}}">
                            <span
                                style="text-align: left; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;width: 240px;">
                                {{item2.sheet_order}}
                            </span>
                        </td>
                        <td style="width:130px;"></td>
                        <td style="width:200px;"></td>
                        <td style="width:230px;" title="{{item2.stuff}}">
                            <span
                                style="text-align: left; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;width: 220px;">
                                {{item2.stuff}}
                            </span>
                        </td>
                        <td style="width:230px;"></td>
                        <td style="width:150px; text-align: center;">{{item2.quatity_total}}</td>
                        <td style="width:150px"></td>
                        <td style="width:200px;"></td>
                        <td style="width:200px;"></td>
                        <td style="width:150px;"></td>
                        <td style="width:150px;"></td>
                        <td style="width:150px;"></td>
                        <td></td>
                    </tr>
                    <tr [(nzExpand)]="item2.expand" *ngFor="let item3 of listfd[key][key2]">
                        <td style="width:50px;background: #000;"></td>
                        <td style="width:50px;background: #000;"></td>
                        <td style="width:50px;background: #000;"></td>
                        <td style="width:50px;background: #000;"></td>
                        <td style="width:250px;background: #000;" title={{item3.workorder}}>
                            <span
                                style="text-align: left; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;width: 240px;">
                                {{item3.workorder}}
                            </span>
                        </td>
                        <td style="width:130px;background: #000;"></td>
                        <td style="width:200px;background: #000;"></td>
                        <td style="width:230px;background: #000;"></td>
                        <td style="width:230px;background: #000;"></td>
                        <td style="width:150px;background: #000;">{{item3.gjsl}}</td>
                        <td style="width:150px;background: #000;"></td>
                        <td style="width:200px;background: #000;"></td>
                        <td style="width:200px;background: #000;"></td>
                        <td style="width:150px;background: #000;"></td>
                        <td style="width:150px;background: #000;"></td>
                        <td style="width:150px;background: #000;"></td>
                        <td style="background: #000;"></td>
                    </tr>
                </ng-container>
            </tbody>
        </nz-table>
        </td>
        </tr>
        </ng-container>
        </tbody>
        </nz-table>

        <!-- 取消工单 -->
        <!-- <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}" [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
            <p>確認刪除這個工聯單嗎？</p>
        </nz-modal> -->
        <nz-modal [(nzVisible)]="isVisible" nzTitle="刪除" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
            [nzOkLoading]="isOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
            [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
            [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
            <textarea placeholder="輸入刪除工單原因" nz-input [(ngModel)]="auditRemark2"
                [nzAutosize]="{ minRows: 7, maxRows: 6 }" class="deRemark"></textarea>
        </nz-modal>
        <!-- 添加19码 -->
        <nz-modal class="add" [(nzVisible)]="add19code" nzTitle="添加19碼" (nzOnCancel)="CancelAdd19Code()"
            (nzOnOk)="add19CodeOk()" [nzOkLoading]="isOkLoading19Code" style="text-align:center"
            [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
            [nzBodyStyle]="{height:'230px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
            <div style="height:15px;"></div>
            <span *ngIf="show19code" style="font-size:18px;">當前最後使用的19碼為：{{newCode19}}</span>
            <input type="text" [(ngModel)]="first" name="value1" class="FirstCode19" maxlength="19">
            <div style="margin:2%">|</div>
            <input type="text" [(ngModel)]="tail" name="value2" class="TailCode19" maxlength="19">
        </nz-modal>

        <!-- 指派工程师 -->
        <!-- <nz-modal [(nzVisible)]="addEngineer" nzTitle="指派工程師" (nzOnCancel)="CancelAddEngineer()"
            (nzOnOk)="AddEngineerOK()" [nzOkLoading]="isOkLoadingEngineer" style="text-align:center">
            <div style="text-align:left">
                <div class="addEng"></div>
                <span class="designTime">設計期限：</span>
                <nz-date-picker [(ngModel)]="designDate"></nz-date-picker>&nbsp;
                <span>預計時間:</span> &nbsp;
                <nz-input-number [(ngModel)]="estimate_time" [nzMin]="1" [nzStep]="1"></nz-input-number>&nbsp;
                <span>小時</span>
            </div>
            <div>
                <nz-table class="tb_Eng" #rowSelectionTable [nzShowPagination]="false" nzShowSizeChanger
                    [nzData]="engineerData" (nzCurrentPageDataChange)="currentPageDataChange($event)"
                    [nzScroll]="{ y: '320px' }">
                    <tbody>
                        <tr *ngFor="let data of engineerData let key = index" id="eng_hover">
                            <td style="padding-left: 4px">
                                <input class="selectEng" type="checkbox" name="selectEng"
                                    [(ngModel)]="engineerDataCheckBoox[key]" checked=engineerDataCheckBoox[key]
                                    (click)="selEngineer(data, key)">
                            </td>
                            <td style="width:200px;text-align: left;text-indent: 30px;">{{data.name}}</td>
                            <td style="text-align: left;">{{data.remark}}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </nz-modal> -->

        <!-- 下载文件 -->
        <nz-modal [(nzVisible)]="fileInfom" nzTitle="文件信息" (nzOnCancel)="CancelShow()" (nzOnOk)="ShowOK()"
            [nzOkLoading]="isOkLoadingfileInfom" style="text-align:center;" nzWidth='1000px'
            [nzBodyStyle]="{height:'600px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'18px',textAlign:'center',lineHeight:'20px'}">
            <div class="addEng"></div>
            <nz-table class="tb_file" [nzShowPagination]="false" [nzData]="listOfData"
                style="height: 555px;overflow: auto;">
                <thead>
                    <tr style="height:20px;">
                        <th style="min-width:250px;text-align:center">文件名稱</th>
                        <th style="min-width:250px;text-align:center">上傳時間</th>
                        <th style="min-width:100px;text-align:center">文件狀態</th>
                        <th style="min-width:250px;text-align:center">備註</th>
                        <th style="min-width:50px;text-align:center"></th>
                    </tr>
                </thead>
                <tbody class="upload">
                    <tr *ngFor="let data of listOfData let key = index" class="list_hover"
                        style="text-align:center !important;">
                        <td style="max-width:250px;text-align:center;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;cursor:pointer;"
                            title={{data.file_name}}>
                            <a [href]="link" [download]="data.file_name" (click)="downLoadFile(data)">
                                {{data.file_name}}
                            </a>
                        </td>
                        <td style="width:250px;text-align:center">{{data.upload_time}}</td>
                        <!-- 审核状态 -->
                        <td style="width:100px;text-align:center" *ngIf="data.file_status === 0" ngDefaultControl
                            [(ngModel)]="fileStatus">
                            <a class="addAudit" (click)="ClickAudit(data, key)"></a>
                        </td>
                        <td style="width:100px;text-align:center" *ngIf="data.file_status != 0">
                            {{data.file_status === 1 ? '已審核' : '已退回' }}
                        </td>

                        <td style="width:250px;text-align:center" title="{{data.remark}}">
                            {{data.remark}}
                        </td>
                        <td style="width:50px;text-align:center">
                            <a class="delFile" (click)="showDelFile(data)"></a>
                        </td>
                        <!-- <td style="visibility:hidden"></td> -->
                    </tr>
                </tbody>
            </nz-table>
        </nz-modal>


        <!-- 添加设计备注 || 主管审核  -->
        <nz-modal class="audit" [(nzVisible)]="addAudit" nzTitle="審核" (nzOnCancel)="CancelAudit()" (nzOnOk)="auditOk()"
            [nzOkLoading]="isOkLoadingAudit" style="text-align:center"
            [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
            [nzBodyStyle]="{height:'310px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
            <div style="margin-top:0px">
                <textarea placeholder="輸入審核備註" nz-input [(ngModel)]="auditRemark"
                    [nzAutosize]="{ minRows: 7, maxRows: 6 }" class="deRemark"></textarea>
            </div>
            <div style="margin-top:6px">
                <nz-tag class="infomTag" *ngFor="let item of infom let key = index " nzMode="checkable"
                    [nzChecked]="selectedTags.indexOf(item) > -1" (nzCheckedChange)="handleChange($event, item)">
                    {{item.value}}
                </nz-tag>
                <!-- <div *ngFor="let item of infom">{{item.value}}</div> -->
            </div>
        </nz-modal>

        <!-- 删除文件信息 -->
        <nz-modal [(nzVisible)]="isFileVisible" nzTitle="刪除" (nzOnCancel)="handleFileCancel()" (nzOnOk)="delFileOk()"
            [nzOkLoading]="isFileOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
            [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'180px'}">
            <p>確認刪除這個文件信息嗎？</p>
        </nz-modal>
    </div>
</div>